<!--  -->
<template>
  <div class="cates">
    <div class="wrapper">
      <div class="left">
        <div
          @click="itemClick(index)"
          v-for="(item, index) in leftMenuList"
          :key="index"
          class="left_menu"
          :class="activeIndex === index ? 'active' : ''"
        >
          {{ item }}
        </div>
      </div>
      <div class="right">
        <div
          v-for="(item, index) in rightContent"
          :key="index"
          class="good_wrap"
        >
          <div class="title">/ {{ item.cat_name }} /</div>
          <div class="content">
            <div
              v-for="(item1, index1) in item.children"
              :key="index1"
              class="wrap"
              @click="toList(item1.cat_id)"
            >
              <div class="img">
                <img :src="item1.cat_icon" alt="" />
              </div>
              <div class="name">{{ item1.cat_name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCates } from "@/util/category.js";
export default {
  name: "Cates",
  data() {
    return {
      Cates: [],
      leftMenuList: [],
      rightContent: [],
      activeIndex: 0,
    };
  },
  created() {
    this.getCates();
  },
  mounted () {
  },
  methods: {
    async getCates() {
      let { data } = await getCates();
    //   console.log(data);
      this.Cates = data.message;
      this.leftMenuList = this.Cates.map((v) => v.cat_name);
      this.rightContent = this.Cates[0].children;
    },
    itemClick(index) {
      this.activeIndex = index;
      this.rightContent = this.Cates[index].children;
    },
    toList(id){
        this.$router.push('/goodsList/' + id)
    }
  },
};
</script>

<style scoped lang='less'>
.cates {
  height: calc(100vh - 137px);
  .wrapper {
    display: flex;
    height: 100%;
    .left {
      overflow-y: scroll;
      flex: 2;
      height: 100%;
      .left_menu {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 15px;
      }
      .active {
        border-left: 2px solid red;
        color: red;
      }
    }
    .right {
      flex: 5;
      overflow-y: scroll;
      .good_wrap {
        .title {
          text-align: center;
          padding: 5px 0;
        }
        .content {
          display: flex;
          flex-wrap: wrap;
          .wrap {
              text-align: center;
              width: 33%;
            .img {
                width: 100%;
              img {
                width: 60%;
              }
            }
            .name {
                text-align: center;
                font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>